<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<div class="ccay-grid-toolbar">
	<span id="btnDel" class="ccay-button" >
		<a class="ccay-icon pre-del"></a>
		<label>delete</label>
	</span>
	<span id="btnUndoDel" class="ccay-button" >
		<a class="ccay-icon undel"></a>
		<label>undo delete</label>
	</span>
	<span id="btnAdd" class="ccay-button" >
		<a class="ccay-icon add"></a>
		<label>insert</label>
	</span>
	<span id="btnSave" class="ccay-button" >
		<a class="ccay-icon save"></a>
		<label>save</label>
	</span>
	<!-- <input id="btnDel" value='delete' type='button' />
	<input id="btnUndoDel" value='undo delete' type=button />
	<input id="btnAdd" value='insert' type='button' />
	<input id="btnSave" value='save' type='button' /> -->
</div>
<div id="userGrid"></div>
<br></br>
<a onclick="Ccay.Common.toggle(this,'#serviceCodeArea')">源码 >></a><br></br>
			<div id="serviceCodeArea"  style="display:none">	
<h3>html 源码:</h3>
<div class="codeArea">
<pre>
   &lt;div class="ccay-grid-toolbar">
	&lt;span id="btnDel" class="ccay-button">
		&lt;a class="ccay-icon pre-del">&lt;/a>
		&lt;label>delete&lt;/label>
	&lt;/span>
	&lt;span id="btnUndoDel" class="ccay-button">
		&lt;a class="ccay-icon undel">&lt;/a>
		&lt;label>undo delete&lt;/label>
	&lt;/span>
	&lt;span id="btnAdd" class="ccay-button">
		&lt;a class="ccay-icon add">&lt;/a>
		&lt;label>insert&lt;/label>
	&lt;/span>
	&lt;span id="btnSave" class="ccay-button">
		&lt;a class="ccay-icon save">&lt;/a>
		&lt;label>save&lt;/label>
	&lt;/span>
   &lt;/div>
   &lt;div id="userGrid">&lt;/div>
</pre>
</div>
<h3>js 源码:</h3>
<div class="codeArea">
<pre>
&lt;script type="text/javascript">
$(function () {
	var imgBtns = [
		{text: "ccay.workflow.label.edit", type: 'img', click: "alert('用户自定义实现编辑功能！')", imgtype:'edit', isIi8n: true},
		{text: "ccay.workflow.label.delete", type: 'img', click: "alert('用户自定义实现删除功能！')", imgtype:'del', isIi8n: true},
		{text: "view", type: 'img', click: "alert('用户自定义实现查看功能！')", imgtype: 'view'}
	];
	var gridOp = {
		editMode: true,
		customTable: true,
		customSetting: true,
		allowFilter: true,
		height: 600,
		columns: [
	    	{columnType: 'select', multi: true},
	    	{columnType: 'operate', btns:imgBtns},
	 		{field: 'name', header: "ccay.common.label.name", filter: true, rule: {required: true, maxlength: 50}},
	 		{field: 'sex', header: "sSex", type: 'bool', format: {isIcon: true}, filter: {defines: [{value : 1, text: "男"},{value: 0, text: "女"}]}},
	 		{field: 'age', header: "sAge", type: 'integer', sort: "asc", hiddenable: false, rule: {range: [16, 80]}, filter: {enumable: true, defines :[{operation: "lessThan", value: 60},{operation: "equalsGreatThan", value: 60}]}},
	 		{field: 'birthday', header: "sBirthday", type: 'date', filter: {enumable: true, ajax: {url: "services/ccay/demo/student/list/time/${filter}"}, valueField: "birthday"}},
	 		{field: 'province', header: "sProvince", type: 'enum', filter: {enumable: true, multi: true}, format: {service: "LOOKUP2:province", valueField: "itemCode", displayField: "itemName"}},
	 		{field: 'blog', header: "sBlog", showTip:true, rule: {maxlength: 100}},
	 		{field: 'lastUpdateDate', header: "ccay.common.label.lastUpdatedDate", type: 'datetime', editable: false, filter: {enumable: true}}
	    ],
		ajax:{
			url: 'services/ccay/demo/student/list/page/filter/${pageSize}/${curPage}/${filter}'
		},
	     operation: {
		    	del: {
		    		btn: '#btnDel',
		    		undoBtn: '#btnUndoDel'
		    	},
		    	insert: {
		    		btn: '#btnAdd',
		    		copy: true,
		    		clear: ['i18nKey']
		    	},
		    	save: {
		    		btn: '#btnSave',
		    		ajax: {
		    			url: "services/ccay/demo/student/batch"
		    		}
		    	}
	     }
	};
	$("#userGrid").igrid(gridOp);
});
&lt;/script>
</pre>
</div>
			</div>
			
<script type="text/javascript">
$(function () {
	var imgBtns = [
		{text: "ccay.workflow.label.edit", type: 'img', click: "alert('用户自定义实现编辑功能！')", imgtype:'edit', isIi8n: true},
		{text: "ccay.workflow.label.delete", type: 'img', click: "alert('用户自定义实现删除功能！')", imgtype:'del', isIi8n: true},
		{text: "view", type: 'img', click: "alert('用户自定义实现查看功能！')", imgtype: 'view'}
	];
	var gridOp = {
		editMode: true,
		customTable: true,
		customSetting: true,
		allowFilter: true,
		height: 600,
		columns: [
	    	{columnType: 'select', multi: true},
	    	{columnType: 'operate', btns:imgBtns},
	 		{field: 'name', header: "ccay.common.label.name", filter: true, rule: {required: true, maxlength: 50}},
	 		{field: 'sex', header: "sSex", type: 'bool', format: {isIcon: true}, filter: {defines: [{value : 1, text: "男"},{value: 0, text: "女"}]}},
	 		{field: 'age', header: "sAge", type: 'integer', sort: "asc", hiddenable: false, rule: {range: [16, 80]}, filter: {enumable: true, defines :[{operation: "lessThan", value: 60},{operation: "equalsGreatThan", value: 60}]}},
	 		{field: 'birthday', header: "sBirthday", type: 'date', filter: {enumable: true, ajax: {url: "services/ccay/demo/student/list/time/${filter}"}, valueField: "birthday"}},
	 		{field: 'province', header: "sProvince", type: 'enum', filter: {enumable: true, multi: true}, format: {service: "LOOKUP2:province", valueField: "itemCode", displayField: "itemName"}},
	 		{field: 'blog', header: "sBlog", showTip:true, rule: {maxlength: 100}},
	 		{field: 'lastUpdateDate', header: "ccay.common.label.lastUpdatedDate", type: 'datetime', editable: false, filter: {enumable: true}}
	    ],
		ajax:{
			url: 'services/ccay/demo/student/list/page/filter/${pageSize}/${curPage}/${filter}'
		},
	     operation: {
		    	del: {
		    		btn: '#btnDel',
		    		undoBtn: '#btnUndoDel'
		    	},
		    	insert: {
		    		btn: '#btnAdd',
		    		copy: true,
		    		clear: ['i18nKey']
		    	},
		    	save: {
		    		btn: '#btnSave',
		    		ajax: {
		    			url: "services/ccay/demo/student/batch"
		    		}
		    	}
	     }
	};
	$("#userGrid").igrid(gridOp);
});
</script>